<template>
	<view class="content">

		<view class="middle">
			<view class="forr" v-for="(item, idx) in list">
				<view class="jiangpai">
					<image src="../../../../static/activity/advanced/jiangpai.png"></image>
				</view>
				<view class="imgs">
					<image :src="item.imgs" mode="" @click="details(item.content)"></image>
				</view>
				<view class="flexx" @click="click_whether(item.description, item.title)">
					<view>
						<view class="yuank"></view>
						<view :class="whether == item.description ? 'gouLan' : 'gou'"></view>
					</view>
					<view class="name">{{item.title}}</view>
				</view>
			</view>
		</view>

		<!-- btn_whether -->
		<view class="btn" @click="btn_whether" v-if="status == 1">
			<button>确认选择</button>
		</view>

		<view class="logo">
			<image src="../../../../static/activity/advanced/logo.png" mode=""></image>
		</view>

		<gui-popup ref="guimodal" :canCloseByShade="false">
			<view style="background-color: white; width: 550rpx; margin: 0 auto; border-radius: 10rpx;">
				<view style="padding-top: 30rpx; font-size: 35rpx; text-align: center;">提示</view>
				<view class="gui-color-gray" style="padding: 25rpx 45rpx; line-height: 1.5;">
					商品只可选择一次，确认后不可修改。是否确认选择
					<text style="color: red; margin-left: 6rpx;">{{title}}</text>
					。选择成功后在优惠券查看该商品核销券
				</view>
				<view style="display: flex; border-top:  1px solid #ccc; margin-top: 10rpx;">
					<view @tap="confirm" style="width: 50%; color: #317CFF; text-align: center; padding: 20rpx 0;">
						确认
					</view>
					<view @tap="cancel"
						style="width: 50%; color: #317CFF; text-align: center; padding: 20rpx 0; border-left:  1px solid #ccc;">
						取消
					</view>
				</view>
			</view>
		</gui-popup>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				whether: 0,
				title: null,
				status: null,
				id: null,
			}
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中...'
			});
			this.user = uni.getStorageSync("member");
			this.id = opt.id
			if (this.id == '228') {
				this.advanced_worker();
			} else if (this.id == '229') {
				this.advanced_work_model();
			}
		},
		methods: {
			advanced_worker() {
				let self = this
				this.$boya.Request({
					url: '/card_availability',
					data: {
						uuid: self.user.uuid,
						card_name: "2024年度先进生产(工作)者选择券",
					}
				}, function(res) {
					console.log('auditRes: ', res.data);
					if (res.code == 200) {
						if (res.data.status) {
							// res.data.status为1：已审核通过
							// res.data.status为-1：审核不通过通过
							// res.data.status为0：未审核
							self.status = res.data.status
							self.get_list();
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: res.data
						});
					}
				}, false)
			},
			advanced_work_model() {
				let self = this
				this.$boya.Request({
					url: '/card_availability',
					data: {
						uuid: self.user.uuid,
						card_name: "2024年度集团生产(工作)标兵劳动模范选择券",
					}
				}, function(res) {
					console.log('auditRes: ', res.data);
					if (res.code == 200) {
						if (res.data.status) {
							// res.data.status为1：已审核通过
							// res.data.status为-1：审核不通过通过
							// res.data.status为0：未审核
							self.status = res.data.status
							self.get_list();
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: res.data
						});
					}
				}, false)
			},
			get_list() {
				let self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 24,
					}
				}, function(res) {
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].name == '先进奖品') {
							let children = data[i].children
							for (var j = 0; j < children.length; j++) {
								if (children[j].id == self.id) {
									let init_index = children[j].init_index
									for (var z = 0; z < init_index.length; z++) {
										if (init_index[z].imgs) {
											let img = init_index[z].imgs.substring(2, init_index[z].imgs.length -
												2);
											init_index[z].imgs = img
										}
									}
									self.list = init_index
									uni.hideLoading();
								}
								console.log('init_index: ', children[j].id);
							}
						}
					}
					console.log('res: ', self.list);
				}, false)
			},
			details(content) {
				uni.navigateTo({
					url: '/pages/activities/welfare/richText?content=' + content
				})
			},
			click_whether(description, title) {
				this.whether = description
				this.title = title
				console.log("couponId: ", this.whether);
				console.log("title: ", this.title);
			},
			btn_whether() {
				let self = this
				if (self.whether) {
					self.$refs.guimodal.open();
					self.yes = false
				} else {
					self.$boya.msg('您未勾选商品优惠券')
				}
			},
			confirm() {
				let self = this
				self.$refs.guimodal.close();
				let couponId = self.whether
				let urlAdd = '/app/card_bag/coupon_add'
				let parmAdd = {
					coupon_id: couponId,
					status: 0,
					num: 1,
				}
				self.$boya.NPost(urlAdd, parmAdd, function(res) {
					console.log("setAdd: ", res.data);
					// 删除选择券
					let name = null
					if (self.id == '228') {
						name = '2024年度先进生产(工作)者选择券'
					} else if (self.id == '229') {
						name = '2024年度集团生产(工作)标兵劳动模范选择券'
					}
					let urlRemove = '/app/wallet_remove'
					let parmRemove = {
						type: name,
						money: '0.00',
					}
					self.$boya.NPost(urlRemove, parmRemove, function(res) {
						console.log("Remove", res);
						uni.showModal({
							title: '提示',
							content: '选择成功，您已选择优惠券: “ ' + self.title + ' ”',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.setStorageSync('retire_card', 'false');
									self.status = 0
									self.get_list()
								}
							}
						});
					}, function(err) {
						console.log('删除选择券err: ', err);
					})
				}, function(err) {
					console.log('创建优惠券err: ', err);
					uni.showModal({
						title: '提示',
						content: '创建优惠券失败，请重新进入该页面进行选择',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								self.status = 0
							}
						}
					});
				})
			},
			cancel() {
				let self = this
				self.$refs.guimodal.close();
				self.$boya.msg("用户取消选择");
				this.yes = true
			},
		},
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../../../static/activity/advanced/bj.png') 100% 100% / 100% 100%;
		padding-bottom: 80rpx;
		/* background: linear-gradient(to top, #57785d, #8d9882, #fff); */
	}

	.middle {
		color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 100rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.forr {
		margin: 25rpx 0;
	}

	.jiangpai {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		z-index: 99;
		margin-left: 200rpx;
		margin-top: -10rpx;
	}

	.jiangpai>image {
		width: 100%;
		height: 100%;
	}

	.imgs {
		width: 258rpx;
		height: 258rpx;
		border: 12px solid #fff;
		border-radius: 40rpx;
		background-color: #fff;
	}

	.imgs>image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.flexx {
		width: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 12rpx;
	}

	.gouLan {
		width: 24rpx;
		height: 24rpx;
		background-color: #E3A814;
		border-radius: 50%;
		position: absolute;
		margin-top: -33rpx;
		margin-left: 10rpx;
	}

	.gou {
		display: none;
	}

	.name {
		/* width: 250rpx; */
		margin-left: 10rpx;
		font-weight: bold;
	}

	.yuank {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		border: 2px solid #E3A814;
		position: relative;
	}

	.btn {
		width: 45%;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.btn>button {
		color: white;
		font-size: 40rpx;
		font-weight: bold;
		background: linear-gradient(to top, #3A8CFF, #1F409E, #1F409E);
	}

	.logo {
		width: 250rpx;
		height: 60rpx;
		position: absolute;
		top: 18rpx;
		left: 18rpx;
	}

	.logo>image {
		width: 100%;
		height: 100%;
	}
</style>